/**
 * Created by mapbar_front on 2018/1/28.
 */

import React,{ Component } from 'react';
import { Table,Icon,Divider } from 'antd';
let data = [{
    key: 1,
    name: '花骨朵',
    age: 18,
    hobby: '看书',
},{
    key: 2,
    name: '天下',
    age: 22,
    hobby: '诗歌',
},{
    key: 3,
    name: '晓晓',
    age: 16,
    hobby: '旅游',
},{
    key: 4,
    name: 'Disabled User',
    age: 19,
    hobby: '禁止',
}]

let columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
},{
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
},{
    title: '爱好',
    dataIndex: 'hobby',
    key: 'hobby',
}]
//这里的rowSelection即使为空也要定义，如果不写的话，会报这样的错误，'rowSelection' is not defined  no-undef'
const rowSelection = {
    //注意这里的radio需要加上引号。
    //type: 'radio',
    //去掉全选和反选两个默认选项，暂时不起作用，不知道为什么
    //现在可以了，因为给false没加引号的缘故。
    hideDefaultSelections: 'true',
    //选择框的默认属性配置
    getCheckboxProps: record =>({
        //禁止掉的就是Disabled User这一项，也就是不能点
        disabled : record.name === 'Disabled User',
    }),

    //在这个里面我们将会得到什么信息呢？
    onChange: (selectedRowKeys,selectedRows)=>{
        //console.log('selectedRowKeys',selectedRowKeys); //得到每一项下标的信息[1],是一个数组，选一项数组中就有一项，选多项就有多项。
        //如果选中一项就是[{}],选中多项就是[{},{},{}]
        //console.log('selectedRows',selectedRows);//得到每一项的信息，也就是每一项的信息[{key: 1, name: "花骨朵", age: 18, hobby: "看书"}]

    },
    //onSelect 用户手动选择／取消选择 某列的回调。
    onSelect: (record, selected, selectedRows)=>{
        //console.log('record',record); //选中的每行，是一个对象
        //console.log('seleted',selected); //true或者false
        //console.log('selectedRows',selectedRows); //选中的每行信息，是一个数组
    },
    onSelectAll: (selected, selectedRows, changeRows)=>{
        // console.log('是否全选');
        // console.log('selected',selected); //是否选中
        // console.log('selectedRows',selectedRows); //选中的每一项
        // console.log('changeRows',changeRows);   //变化的每一项

    },
    //用户手动选择反选的回调
    onSelectInvert: (selectedRows)=>{
        console.log('selectedRows',selectedRows);
    },
}
class MaySelect extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    render() {

        return (
            <Table dataSource={ data } columns={ columns } rowSelection={ rowSelection } />
        )
    }
}
export default MaySelect;
